<template>
	<view class="statement">
		<view class="statement-engineer">
			{{service_type == 0?'维修':(service_type == 1?'保养':'返修')}}工程师：{{engineer}}-{{phone}}
		</view>
		<view class="title">
			<text>工单信息</text>
		</view>
		<view class="card-detail">
			<view class="ful-detail">
				<view class="detail-left" style="width: 120rpx;"> 工单号 </view>
				<view class="detail-right2" style="width: 150rpx;"> {{order_detail.workID}} </view>
				<view class="detail-left" style="width: 180rpx;margin-right: 20rpx;"> 客户报修时间 </view>
				<view class="detail-right"> {{order_detail.createtime}} </view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					客户名称
				</view>
				<view class="detail-right">
					{{order_detail.hospital.name}}
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left"> 类别 </view>
				<view class="detail-right2"> {{order_detail.equipment.pinpai.name||'暂无'}} </view>
				<view class="detail-left "> 品牌 </view>
				<view class="detail-right2"> {{order_detail.equipment.leibie.name||'暂无'}} </view>
			</view>
			<view class="ful-detail">
				<view class="detail-left"> 型号 </view>
				<view class="detail-right2"> {{order_detail.equipment.xinghao.name||'暂无'}} </view>
				<view class="detail-left"> 软件版本 </view>
				<view class="detail-right2" style="margin-left: 40rpx;width: 340rpx;">
					{{order_detail.equipment.software_version||'暂无'}}
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left" style="width: 120rpx;"> 服务类型 </view>
				<view class="detail-right2" style="width: 130rpx;margin-left: 20rpx;">
					{{service_type == 0?'维修':(service_type == 1?'保养':'返修')}}
				</view>
				<view class="detail-left"> 合同类型 </view>

				<view class="detail-right" style="width: 180rpx;margin-right: 20rpx;flex:1">
					<span v-if="order_detail.contract_status">{{changeContract(order_detail.contract_status)}}</span>
					<picker v-else mode="selector" :range="contract_status_data" :value="contract_default"
						@change="bindDateChange">
						<view class="uni-input">{{contract_default || '请选择'}}</view>
					</picker>
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left"> 工程师到达时间 </view>
				<view class="detail-right">
					<xp-picker @input="confirm">{{ arrive_time }}</xp-picker>
				</view>
			</view>
		</view>
		<view class="title">
			<text>客户{{service_type == 0?'维修':(service_type == 1?'保养':'返修')}}内容</text>
		</view>
		<view class="enclosure">
			<view class="enclosure_tro">
				<textarea v-model="content" placeholder-style="font-size: 28rpx; color: #434343;" placeholder="请输入..."
					style="width:100%" maxlength="140" />
			</view>
		</view>

		<view class="title">
			<text>{{repairText}}</text>
		</view>
		<view class="card-detail">

			<view class="ful-detail">
				<view class="detail-left"> {{service_type == 0?'维修':(service_type == 1?'保养':'返修')}}记录 </view>
				<view class="detail-right" style="flex:1">
					<input type="text" v-model="repair_record" placeholder="请输入..." maxlength="140">
				</view>
			</view>
		</view>
		<view class="title">
			<text>上传图片</text>
		</view>
		<view class="enclosure">
			<!-- <view class="enclosure_img" v-for="(item, index) in order_detail.multiMedia.imgs" :key="index">
				<image :src="item" />
			</view> -->
			<view class="enclosure_img" v-for="(item, index) in photoList" :key="index">
				<view class="img_del" @click="delImg(index)">
					<image src="../../static/del.png" mode="aspectFill" />
				</view>
				<image :src="item" mode="aspectFill" @click="preview(item)" />
			</view>
			<view class="add_btn" v-if="photoList.length < 6" @click="choosePhoto">
				<image src="../../static/camera.png" class="img" />
			</view>
		</view>
		<view class="title">
			<text>{{service_type == 0?'维修':(service_type == 1?'保养':'返修')}}结果及建议</text>
		</view>
		<view class="proposal">
			<textarea v-model="ending" placeholder-style="font-size: 28rpx;color: #434343;" placeholder="请输入..."
				maxlength="140" />
		</view>
		<view class="submit" @tap="submit"> 提交申请接单 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repairText: '服务信息',
				service_type: null, //服务类型:0=维修,1=保养,2=安装
				contract_status: null, //	合同状态:0=技术保合同,1=无合同,2=标准:白金合同,3=单次合同   6单次维修合同、5单次保养合同、4整机铂金保合同、3整机金保合同、2整机银保合同、1整机技术保合同、0无合同
				contract_default: '请选择',
				service_default: '请选择',
				contract_status_data: ['无合同', '整机技术保合同', '整机银保合同', '整机金保合同', '整机铂金保合同', '单次保养合同', '单次维修合同'],
				service_type_data: ['维修', '保养'],
				warranty_id: null, //工单id 
				service_id: null, //维修id
				order_detail: {}, //订单详情
				arrive_time: '请选择时间', //工程师到达时间
				repair_record: '', // 维修记录
				ending: '', //维修结果及建议
				engineer: '',
				phone: '',
				content: '',
				photoList: [], // 图片列表
				isSubmit: true
			}
		},

		onLoad(e) {
			/*  warranty_id 工单id    service_id维修id
			 */
			this.warranty_id = e.warranty_id
			this.service_type = e.service_type
			this.service_id = e.service_id
			this.getDetail()
			this.getUser()
		},
		onShow() {
			let photo = uni.getStorageSync('statement-photo');
			if (photo) {
				this.photoList = photo
			}
		},
		onUnload() {
			uni.removeStorageSync('statement-photo');
		},
		methods: {
			/* 转化 合同状态  */
			changeContract(i) {
				console.log(i, '---------iiiii-----------')
				// 6单次维修合同、5单次保养合同、4整机铂金保合同、3整机金保合同、2整机银保合同、1整机技术保合同、0无合同
				switch (i) {
					case '1':
						return '整机技术保合同';
					case '2':
						return '整机银保合同';
					case '3':
						return '整机金保合同';
					case '4':
						return '整机铂金保合同';
					case '5':
						return '单次保养合同';
					case '6':
						return '单次维修合同';
					default:
						return '无合同'
				}
			},
			bindDateChange(e) {
				this.contract_default = this.contract_status_data[e.detail.value]
				this.contract_status = e.detail.value
			},
			/* 服务信息选择  
			id
			1   设备合同选择
			2  服务类型选择
			*/
			choiceType(id) {
				switch (id) {
					case 1:
						uni.showActionSheet({
							itemList: this.contract_status_data,
							success: res => {
								this.contract_default = this.contract_status_data[res.tapIndex]
								this.contract_status = res.tapIndex
							},
							fail: res => {
								console.log(res.errMsg);
							}
						});
						break;
					case 2:
						uni.showActionSheet({
							itemList: this.service_type_data,
							success: res => {
								this.service_default = this.service_type_data[res.tapIndex]
								this.repairText = this.service_type == 0 ? '客户报修内容' : (this.service_type == 1 ?
									'客户保养内容' : '客户返修内容')
								this.service_type = res.tapIndex
							},
							fail: res => {
								console.log(res.errMsg);
							}
						});
						break;
				}
			},
			/* 判断是否为视频文件 */
			judgmentFile(picUrl) {

				let filename = picUrl; //文件路径地址
				let index1 = filename.lastIndexOf(".");
				let index2 = filename.length;
				let postf = filename.substring(index1, index2); //获取文bai件后缀名duzhi
				//判断文件后缀名是否等于视频文件的后缀名
				if (postf === ".avi" || postf === ".mp4" || postf === ".rmvb") {
					return true
				} else {
					return false
				}
			},
			/* 获取工单详情 */
			getDetail() {
				this.$https.post('/warranty/details', {
					warranty_id: this.warranty_id
				}).then(res => {
					this.order_detail = res.data
					console.log(this.order_detail, 'this.order_detail ---------------')
					if (this.order_detail?.images) { //存在照片或视频
						let images = this.order_detail.images?.split(',') || [] //字符串转数组  获取照片和视频
						this.order_detail.multiMedia = {
							imgs: [],
							video: ''
						}
						images.forEach(item3 => {
							if (this.judgmentFile(item3)) {
								this.order_detail.multiMedia.video = item3
							} else {
								this.order_detail.multiMedia.imgs.push(item3)
							}
						})
					}
				})
			},
			/* 获取当前 工程师名称 */

			getUser() {
				this.$https.post('/user/getUser').then(res => {
					this.engineer = res.data.user.nickname;
					this.phone = res.data.user.mobile
				})
			},
			/* 工程师到达时间 */
			confirm(e) {
				this.arrive_time = e
			},
			/* 选择照片 */
			choosePhoto() {
				uni.navigateTo({
					url: '/pages/statement/choosePhoto?warranty_id=' + this.warranty_id
				})
			},
			// 删除照片
			delImg(index) {
				this.photoList.splice(index, 1);
				uni.setStorageSync('statement-photo', this.photoList)
			},
			// 图片预览
			preview(current) {
				uni.previewImage({
					current: current,
					urls: this.photoList
				});
			},
			/* 提交 */
			submit() {

				if (!this.content || this.content == "") {
					uni.showToast({
						icon: 'none',
						title: `请填写${this.service_type == 0?'报修':(this.service_type == 1?'保养':'返修')}内容！`,
						duration: 1500
					})
					return
				}
				if (this.photoList.join(",") == '') {
					uni.showToast({
						icon: 'none',
						title: `请上传${this.service_type == 0?'报修':(this.service_type == 1?'保养':'返修')}图片！`,
						duration: 1500
					})
					return
				}
				if (this.arrive_time != '请选择时间') {

					if (!this.isSubmit) return

					if (!this.order_detail.contract_status && !this.contract_status) {
						uni.showToast({
							icon: 'none',
							title: `请选择合同类型！`,
							duration: 1500
						})
						return
					}
					this.isSubmit = false
					let data = {
						warranty_id: this.warranty_id, //工单id
						service_id: this.service_id, //维修id	
						contract_status:  this.order_detail.contract_status || this.contract_status, //	合同状态:0=技术保合同,1=无合同,2=标准:白金合同,3=单次合同
						service_type: this.service_type, //服务类型:0=维修,1=保养,2=安装
						present_time: this.arrive_time, //到场时间
						repair_record: this.repair_record, // 维修记录
						ending: this.ending, //维修结果及建议
						content: this.content, //报修内容
						images: this.photoList.join(","),
						is_backup: this.service_type != 2 ? 0 : 1
					}
					this.$https.post('/warranty/statement', data).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							success: () => {
								uni.removeStorageSync('statement-photo')
								uni.removeStorageSync('statement-temp')
								setTimeout(() => {
									this.isSubmit = true
									uni.navigateBack({
										delta: res
									})
								}, 400)
							}
						})
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: "请选择工程师到达时间！",
						duration: 1500
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		/* border-top: 75rpx solid #f7f8fb;
		border-bottom: 50rpx solid #f7f8fb; */
		margin: 75rpx auto 50rpx;
		width: 622rpx;
		height: 80rpx;
		background: #257EFA;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		letter-spacing: 8rpx;
		text-align: center;
	}

	.statement {
		background-color: #f7f8fb;
	}

	.statement-engineer {
		padding: 24rpx 32rpx;
		background: #FFEFE6;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF6619;
	}

	.title {
		padding: 16rpx 32rpx;
		background-color: #f7f8fb;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #888888;
	}

	.card-detail {
		background-color: #FFFFFF;

		.ful-detail {
			padding: 24rpx 32rpx;
			display: flex;
			position: relative;

			.arrow {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-right: 3rpx solid #BBBBBB;
				border-bottom: 3rpx solid #BBBBBB;
				right: 32rpx;
				transform: rotate(-45deg);
			}

			.detail-left {
				width: 200rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #888888;
			}

			.detail-right2 {
				width: 400rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #434343;
			}

			.ml {
				width: 120rpx;
			}

			.detail-right {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #434343;
			}
		}
	}

	.enclosure {
		background-color: #FFFFFF;
		padding: 22rpx 32rpx 0;

		.enclosure_tro {
			font-size: 24rpx;
			// font-family: PingFang SC-Medium, PingFang SC;
			// font-weight: 500;
			color: #000;
		}

		.enclosure_img {
			display: inline-block;
			width: 150rpx;
			height: 150rpx;
			margin-right: 20rpx;
			margin-bottom: 22rpx;
			position: relative;

			&:nth-child(4) {
				margin-right: 0;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}

			.img_del {
				position: absolute;
				right: -20rpx;
				top: -20rpx;
				width: 40rpx;
				height: 40rpx;
				background-color: #FFFFFF;
				border-radius: 50%;
				z-index: 9;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.add_btn {
			width: 150rpx;
			height: 150rpx;
			background: #F5F6F8;
			border-radius: 8rpx;
			position: relative;
			overflow: hidden;
			display: inline-block;

			.img {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -30rpx;
				margin-left: -30rpx;
			}
		}
	}

	.proposal {
		padding: 22rpx 32rpx;
		background-color: #FFFFFF;
		height: 200rpx;

		textarea {
			height: 100%;
			width: 100%;
		}
	}

	/* 设置input框提示内容的样式 */
	input::-webkit-input-placeholder {
		color: #434343;
	}

	/*webkit 内核浏览器*/
	input::-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 19+*/
	input:-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 4 to 18*/
	input:-ms-input-placeholder {
		color: #434343;
	}

	/* 设置textarea框提示内容的样式 */
	textarea::-webkit-input-placeholder {
		color: #434343;
	}

	/*webkit 内核浏览器*/
	textarea::-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 19+*/
	textarea:-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 4 to 18*/
	textarea:-ms-input-placeholder {
		color: #434343;
	}

	/deep/ .xp-picker-mask {
		z-index: 222;
	}
</style>